<nz-card class="search-component-wrap">
  <div nz-row [nzGutter]="24">
    <ng-container *ngFor="let item of searchOptions; let index = index;">
      <div nz-col [nzSm]="8" [nzLg]="8" [nzXXl]="xxlSize" [hidden]="index > 2 ? !isCollapse : false" *ngIf="!item?.hide">
        <nz-form-item>
          <nz-form-label [nzFlex]="labelFlex">{{ item.labelText }}</nz-form-label>
          
          <nz-form-control nzFlex="auto">
            <ng-container [ngSwitch]="item.type">
              <!-- Input -->
              <div *ngSwitchCase="1">
                <nz-input-group [nzSuffix]="inputClearTpl">
                  <input
                    type="text"
                    nz-input
                    [(ngModel)]="item.value"
                    [placeholder]="item.placeholder || '请输入' + item.labelText"
                  />
                </nz-input-group>
                <ng-template #inputClearTpl>
                  <i
                    nz-icon
                    class="ant-input-clear-icon"
                    nzTheme="fill"
                    nzType="close-circle"
                    *ngIf="item.value"
                    (click)="item.value = ''"
                  ></i>
                </ng-template>
              </div>

              <!-- Select -->
              <div *ngSwitchCase="2">
                <nz-select
                  [nzMode]="item.multiple ? 'multiple' : 'default'"
                  [nzMaxTagCount]="1"
                  nzShowSearch
                  nzAllowClear
                  [nzPlaceHolder]="item.placeholder || '请选择' + item.labelText"
                  [(ngModel)]="item.value"
                  (ngModelChange)="item.selectChange ? item.selectChange($event) : defaultChange($event)"
                >
                  <ng-container *ngFor="let option of item.selectOptions">
                    <nz-option
                      [nzLabel]="item.selectBindKey ? option[item.selectBindKey['label']] : option.label"
                      [nzValue]="item.selectBindKey ? option[item.selectBindKey['key']] : option.value">
                    </nz-option>
                  </ng-container>
                </nz-select>
              </div>

              <!-- Select Search -->
              <div *ngSwitchCase="21">
                <nz-select
                  [nzMode]="item.multiple ? 'multiple' : 'default'"
                  [nzMaxTagCount]="1"
                  nzShowSearch
                  nzServerSearch
                  nzAllowClear
                  [nzPlaceHolder]="item.placeholder || '请输入' + item.labelText"
                  [(ngModel)]="item.value"
                  [nzFilterOption]="nzFilterOption"
                  (nzOnSearch)="item.selectSearchChange ? item.selectSearchChange($event) : defaultSelectSearchChange($event)"
                >
                  <ng-container *ngFor="let option of item.selectOptions">
                    <nz-option
                      *ngIf="!item.isSelectSearchLoading"
                      [nzLabel]="item.selectBindKey ? option[item.selectBindKey['label']] : option.label"
                      [nzValue]="item.selectBindKey ? option[item.selectBindKey['key']] : option.value">
                    </nz-option>
                  </ng-container>
                  <nz-option *ngIf="item.isSelectSearchLoading" nzDisabled nzCustomContent>
                    <i nz-icon nzType="loading" class="loading-icon"></i>
                    Loading Data...
                  </nz-option>
                </nz-select>
              </div>

              <!-- nz-range-picker -->
              <div *ngSwitchCase="3">
                <nz-range-picker
                  style="width: 100%;"
                  [nzFormat]="'yyyy-MM-dd'"
                  [(ngModel)]="item.value">
                </nz-range-picker>
              </div>
            </ng-container>
          </nz-form-control>
        </nz-form-item>
      </div>
    </ng-container>

    <div nz-col nzFlex="auto">
      <nz-form-item>
        <nz-form-control class="search-end">
          <button nz-button [nzType]="'primary'" [nzLoading]="submitLoading" (click)="submitSearch()">{{ submitTetx }}</button>
          <button nz-button class="m-l-10" (click)="resetSearch()">{{ resetTetx }}</button>

          <button
            *ngIf="searchOptions.length > 3"
            nz-button
            nzType="link"
            class="collapse-btn"
            (click)="isCollapse = !isCollapse"
          >
            {{ isCollapse ? '收起' : '展开' }}
            <i nz-icon [nzType]="isCollapse ? 'up' : 'down'"></i>
          </button>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
</nz-card>